<template>
  <view class="my-user">
    <view class="myuser-header">
      <img src="/static/home/myUser/head.png" mode="aspectFill" alt="头像" class="header-image" />
      <text class="header-text">{{ userInfo.realName || "" }}</text>
    </view>
    <view class="menu">
      <view class="menu-item" v-for="item in listData" :key="item.id" @click="handleMenuItemClick(item)">
        <image class="item-icon" :src="item.icon" mode="aspectFit"  ></image>
        <text class="item-text">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { apiAppUserProfileGetUserInfo } from "@/api/app/appUserProfile.js"
  export default {
    data() {
      return {
        userInfo: {},
        listData: [{
            id: 1,
            title: '个人资料',
            icon: '/static/home/myUser/grzl.png',
            path:'/pages/other/myUserpages/personalData/personalData'
          },
          {
            id: 2,
            title: '修改登录密码',
            icon: '/static/home/myUser/xgmm.png',
            path:'/pages/other/myUserpages/changePassword/changePasseord'
          },
          {
            id: 3,
            title: '清除缓存',
            icon: '/static/home/myUser/cache.png',
            path:''
          },
          {
            id: 4,
            title: '检查更新',
            icon: '/static/home/myUser/version.png',
            path:''
          },
          {
            id: 5,
            title: '设置',
            icon: '/static/home/myUser/shezhi.png',
            path:'/pages/other/myUserpages/set/set'
          },
          {
            id: 6,
            title: '关于我们',
            icon: '/static/home/myUser/gywm.png',
            path:'/pages/other/myUserpages/version/version'
          },
          {
            id: 7,
            title: '二维码下载',
            icon: '/static/home/myUser/scan.png',
            path:'/pages/other/myUserpages/downLoad/downLoad'
          },
          {
            id: 8,
            title: '退出登录',
            icon: '/static/home/myUser/log_out.png',
          },
        ]
      }
    },
    onLoad(){
      this.init()
    },
    methods: {
      init(){
        apiAppUserProfileGetUserInfo().then(res => {
          this.userInfo = res.data;
          uni.setStorageSync('userInfo', res.data)
        })
      },
      handleMenuItemClick(item){
        if (item.path) {
          uni.navigateTo({
            url: item.path
          });
        } else{
          switch(item.title) {
            case "清除缓存":
              this.clearCache();
              break;
            case "退出登录":
              this.logout();
              break;
            case "检查更新":
              this.showVersion();
              break;
          }
        }
      },
      clearCache() {
        uni.clearStorageSync();
        uni.showToast({
          title: '缓存已清除',
          icon: 'none',
          duration: 2000
        });
      },
      logout() {
        uni.removeStorageSync('token');
        uni.showToast({
          title: '退出登录成功',
          icon: 'none'
        }),
        setTimeout(()=>{
          uni.redirectTo({
            url: '/pages/login/login'
          });
        },1000)
      },
      showVersion(){
        uni.showToast({
          title: '当前已为最新版本',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-user {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(to bottom, #eaf6ff, #f5faff);
    padding-top: 10px;

    .myuser-header {
      display: flex;
      padding: 30px;
      align-items: center;

      .header-image {
        width: 60px;
        border-radius: 50px;
      }

      .header-text {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 550;
      }
    }

    .menu {
      margin:  15px;
      padding: 10px;
      background-color: white;
      border-radius: 15px;
      max-height: calc(100vh - 220px);
      overflow-y: auto;

      .menu-item {
        display: flex;
        align-items: center;
        padding: 12px;
        border-bottom: 1rpx solid #f5f5f5;
        position: relative;

        &:before {
          content: '';
          position: absolute;
          right: 0px;
          top: 15px;
          width: 20px;
          height: 20px;
          background: url('/static/home/myUser/right.png') no-repeat;
          background-size: 100%;
        }


        &:active {
         background-color: rgba(64, 158, 255, 0.1);
        }

        .item-icon {
          width: 25px;
          height: 25px;
          margin-right: 15px;
        }

        .item-text {
          flex: 1;
          font-size: 15px;
          font-weight: 550;
        }
      }
    }
  }
</style>
